.modal-body
    ul.nav-tabs(ngbNav, #nav='ngbNav')
        li(ngbNavItem)
            a(ngbNavLink) General
            ng-template(ngbNavContent)
                .form-group
                    label Name
                    input.form-control(
                        type='text',
                        autofocus,
                        [(ngModel)]='connection.name',
                    )

                .row
                    .col-6
                        .form-group
                            label Path
                            input.form-control(
                                type='text',
                                [(ngModel)]='connection.port',
                                [ngbTypeahead]='portsAutocomplete',
                                [resultFormatter]='portsFormatter',
                            )

                    .col-6
                        .form-group
                            label Baud Rate
                            select.form-control(
                                [(ngModel)]='connection.baudrate',
                            )
                                option([value]='x', *ngFor='let x of baudRates') {{x}}

                .row
                    .col-6
                        .form-line
                            .header
                                .title Input mode

                            .d-flex(ngbDropdown)
                                button.btn.btn-secondary.btn-tab-bar(
                                    ngbDropdownToggle,
                                ) {{getInputModeName(connection.inputMode)}}

                                div(ngbDropdownMenu)
                                    a.d-flex.flex-column(
                                        *ngFor='let mode of inputModes',
                                        (click)='connection.inputMode = mode.key',
                                        ngbDropdownItem
                                    )
                                        div {{mode.name}}
                                        .text-muted {{mode.description}}

                    .col-6
                        .form-line
                            .header
                                .title Input newlines

                            select.form-control(
                                [(ngModel)]='connection.inputNewlines',
                            )
                                option([ngValue]='mode.key', *ngFor='let mode of newlineModes') {{mode.name}}

                .row
                    .col-6
                        .form-line
                            .header
                                .title Output mode

                            .d-flex(ngbDropdown)
                                button.btn.btn-secondary.btn-tab-bar(
                                    ngbDropdownToggle,
                                ) {{getOutputModeName(connection.outputMode)}}

                                div(ngbDropdownMenu)
                                    a.d-flex.flex-column(
                                        *ngFor='let mode of outputModes',
                                        (click)='connection.outputMode = mode.key',
                                        ngbDropdownItem
                                    )
                                        div {{mode.name}}
                                        .text-muted {{mode.description}}

                    .col-6
                        .form-line
                            .header
                                .title Output newlines

                            select.form-control(
                                [(ngModel)]='connection.outputNewlines',
                            )
                                option([ngValue]='mode.key', *ngFor='let mode of newlineModes') {{mode.name}}

        li(ngbNavItem)
            a(ngbNavLink) Advanced
            ng-template(ngbNavContent)
                .form-line
                    .header
                        .title Tab color
                    input.form-control(
                        type='text',
                        autofocus,
                        [(ngModel)]='connection.color',
                        placeholder='#000000'
                    )

                .form-line
                    .header
                        .title DataBits
                    input.form-control(
                        type='number',
                        placeholder='8',
                        [(ngModel)]='connection.databits',
                    )

                .form-line
                    .header
                        .title StopBits
                    input.form-control(
                        type='number',
                        placeholder='1',
                        [(ngModel)]='connection.stopbits',
                    )

                .form-line
                    .header
                        .title Parity
                    input.form-control(
                        type='text',
                        [(ngModel)]='connection.parity',
                        placeholder='none'
                    )

                .form-line
                    .header
                        .title RTSCTS
                    toggle([(ngModel)]='connection.rtscts')

                .form-line
                    .header
                        .title Xon
                    toggle([(ngModel)]='connection.xon')

                .form-line
                    .header
                        .title Xoff
                    toggle([(ngModel)]='connection.xoff')

                .form-line
                    .header
                        .title Xany
                    toggle([(ngModel)]='connection.xany')

        li(ngbNavItem)
            a(ngbNavLink) Login scripts
            ng-template(ngbNavContent)
                table(*ngIf='connection.scripts.length > 0')
                    tr
                        th String to expect
                        th String to be sent
                        th.pl-2 Regex
                        th.pl-2 Optional
                        th.pl-2 Actions
                    tr(*ngFor='let script of connection.scripts')
                        td.pr-2
                            input.form-control(
                                type='text',
                                [(ngModel)]='script.expect'
                            )
                        td
                            input.form-control(
                                type='text',
                                [(ngModel)]='script.send'
                            )
                        td.pl-2
                            checkbox(
                                [(ngModel)]='script.isRegex',
                            )
                        td.pl-2
                            checkbox(
                                [(ngModel)]='script.optional',
                            )
                        td.pl-2
                            .input-group.flex-nowrap
                                button.btn.btn-outline-info.ml-0((click)='moveScriptUp(script)')
                                    i.fas.fa-arrow-up
                                button.btn.btn-outline-info.ml-0((click)='moveScriptDown(script)')
                                    i.fas.fa-arrow-down
                                button.btn.btn-outline-danger.ml-0((click)='deleteScript(script)')
                                    i.fas.fa-trash

                button.btn.btn-outline-info.mt-2((click)='addScript()')
                    i.fas.fa-plus
                    span New item

    div([ngbNavOutlet]='nav')

.modal-footer
    button.btn.btn-outline-primary((click)='save()') Save
    button.btn.btn-outline-danger((click)='cancel()') Cancel
